<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/static/assets/vendors/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/assets/css/base.css">
    <link rel="stylesheet" href="/static/assets/css/index.css">
    <script src="/static/assets/vendors/jquery/jquery.min.js"></script>
    <script src="/static/assets/vendors/bootstrap/js/bootstrap.min.js"></script>
    <style>
        @media (min-width: 760px){
            .cc {
                height: 300px;
            }
        }

    </style>
</head>

<body>
    <!-- 导航栏 -->
    <div class="container bs_index bs_navbar_height ">
        <nav class="navbar navbar-default clearfix">
            <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header bs_navbar_height">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">
                       <img src="/static/assets/img/login.png" width="200px" height="50px" alt=Brand"">
                    </a>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#">首页</a></li>
                        <li><a href="#">详情页</a></li>
                        <li><a href="#">好句分享</a></li>
                        <li><a href="#">实验室</a></li>
                        <li><a href="#">关于</a></li>
                        <li><a href="#">留言</a></li>

                    </ul>
                </div><!-- /.navbar-collapse -->
            </div><!-- /.container-fluid -->
        </nav>
    </div>
    <div class="bs_main">
        <!-- 左边 -->
        <!-- 轮播图 -->
        <div class="bs_main_left">
            <div class="bs_lunbotu">
                <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                    <ol class="carousel-indicators">
                        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="3"></li>
                    </ol>
                    <div class="carousel-inner cicle" role="listbox">
                        <div class="item active">
                            <a href="#" class="pc_imgBox hidden-xs"
                                style="background-image: url(/static/assets/img/lr.jpg)"></a>
                            <a href="#" class="m_imgBox hidden-lg hidden-md hidden-sm cc"><img
                                    src="/static/assets/img/lr.jpg" alt=""></a>
                        </div>
                        <div class="item">
                            <a href="#" class="pc_imgBox  hidden-xs"
                                style="background-image: url(/static/assets/img/lr.jpg)"></a>
                            <a href="#" class="m_imgBox hidden-lg hidden-md hidden-sm"><img
                                    src="/static/assets/img/lr.jpg" alt=""></a>
                        </div>
                        <div class="item">
                            <a href="#" class="pc_imgBox hidden-xs"
                                style="background-image: url(/static/assets/img/lr.jpg)"></a>
                            <a href="#" class="m_imgBox hidden-lg hidden-md hidden-sm"><img
                                    src="/static/assets/img/lr.jpg" alt=""></a>
                        </div>
                        <div class="item">
                            <a href="#" class="pc_imgBox hidden-xs"
                                style="background-image: url(/static/assets/img/lr.jpg)"></a>
                            <a href="#" class="m_imgBox hidden-lg hidden-md hidden-sm"><img
                                    src="/static/assets/img/lr.jpg" alt=""></a>
                        </div>

                    </div>
                    <a class="left carousel-control cicle" href="#carousel-example-generic" data-slide="prev">
                        <span class="glyphicon glyphicon-chevron-left"></span>
                    </a>
                    <a class="right carousel-control cicle" href="#carousel-example-generic" data-slide="next">
                        <span class="glyphicon glyphicon-chevron-right"></span>
                    </a>
                </div>
            </div>
            <div class="bs_list container">
                <div class="bs_list_start">
                    <img src="/static/assets/img/80ico_t.png" width="20px" height="20px" alt="">
                    <h2>最新文章</h2>
                    <em></em>
                </div>
                <div class="bs_list_end">
                    <div class="bs_list_left">
                        <img src="/static/assets/img/list/1572525462.png" alt="">
                    </div>
                    <div class="bs_list_right">
                        <h4><a href="">《朝花夕拾》特别篇</a></h4>
                        <span>Navicat for MySQL 是一套专为 MySQL 设计的高性能数据库管理及开发工具。它可以用于任何版本 3.21 或以上的 MySQL 数据库服务器，并支持大部份
                            MySQL 最新版本的功能，包括触发器、存储过程、函数、事件、视图、管理用户等。</span>
                    </div>

                    <div class="bs_list_left">
                        <img src="/static/assets/img/list/1572525462.png" alt="">
                    </div>
                    <div class="bs_list_right">
                        <h4><a href="">《朝花夕拾》特别篇</a></h4>
                        <span>Navicat for MySQL 是一套专为 MySQL 设计的高性能数据库管理及开发工具。它可以用于任何版本 3.21 或以上的 MySQL 数据库服务器，并支持大部份
                            MySQL 最新版本的功能，包括触发器、存储过程、函数、事件、视图、管理用户等。</span>
                    </div>

                    <div class="bs_list_left">
                        <img src="/static/assets/img/list/1572525462.png" alt="">
                    </div>
                    <div class="bs_list_right">
                        <h4><a href="">《朝花夕拾》特别篇</a></h4>
                        <span>Navicat for MySQL 是一套专为 MySQL 设计的高性能数据库管理及开发工具。它可以用于任何版本 3.21 或以上的 MySQL 数据库服务器，并支持大部份
                            MySQL 最新版本的功能，包括触发器、存储过程、函数、事件、视图、管理用户等。</span>
                    </div>
                </div>
            </div>
            <!-- 页码 -->
            <div class="bs_page"></div>
        </div>


        <!-- 右边 -->
        <div class="bs_main_right">
            <div class="bs_main_user">
                <div class="bs_main_user_top">
                    <a href="#"><img src="/static/assets/img/default.png" alt=""></a>
                    <h3>&nbsp;痛了，爱了，恨了，忘了吧,梦里随他，轻轻枝丫</h3>
                </div>
                <div class="bs_main_user_middle">
                    <div class="author-social">
                        <div class="weixin"><a href="" class="icomoon_icon icon-bubbles2"></a></div>
                        <div class="qq"><a href="" class="icomoon_icon icon-tux"></a></div>
                    </div>
                </div>
                <div class="bs_main_user_button">
                    <ul>
                        <li>主页</li>
                        <li>询问</li>
                        <li>询问</li>
                    </ul>
                </div>

            </div>
            <div class="bs_main_sort container">
                <div class="bs_main_sort_start">
                    <img src="/static/assets/img/80ico_tag.png" alt="">
                    <img src="/static/assets/img/arrow-right.png" alt="">
                    <span>图书分类</span>
                </div>
                <div class="bs_main_sort_end">
                    <ul>
                        <li class="btn btn-default"><a href="#">数学</a></li>
                        <li class="btn btn-default"><a href="#">数学</a></li>
                        <li class="btn btn-default"><a href="#">数学</a></li>
                        <li class="btn btn-default"><a href="#">数学</a></li>
                        <li class="btn btn-default"><a href="#">数学</a></li>
                        <li class="btn btn-default"><a href="#">数学</a></li>
                        <li class="btn btn-default"><a href="#">数学</a></li>
                        <li class="btn btn-default"><a href="#">数学</a></li>
                        <li class="btn btn-default"><a href="#">数学</a></li>
                        <li class="btn btn-default"><a href="#">数学</a></li>
                        <li class="btn btn-default"><a href="#">数学</a></li>

                    </ul>
                </div>
            </div>
            <div class="bs_main_article">
                <div class="article_start">
                    <img src="/static/assets/img/80ico_tag.png" alt="">
                    <span>热门文章</span>
                </div>
                <div class="article_end">
                    <ul>
                        <li><span class="one">1</span><a href="">分享一个高清壁纸的api</a></li>
                        <li><span class="two">2</span><a href="">分享一个高清壁纸的api</a></li>
                        <li><span class="three">3</span><a href="">分享一个高清壁纸的api</a></li>
                        <li><span class="four">4</span><a href="">分享一个高清壁纸的api</a></li>
                        <li><span class="five">5</span><a href="">分享一个高清壁纸的api</a></li>
                        <li><span class="six">6</span><a href="">分享一个高清壁纸的api</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
















    <script>
        $('.collapse').collapse()
    </script>
</body>

</html>